import {
    getCuesActivePage,
    treeOrganization,
} from '@/services/api/api-county';
import { CheckCircleOutlined, FileImageOutlined, PaperClipOutlined } from '@ant-design/icons';
import { ModalForm, ProFormDigit } from '@ant-design/pro-form';
import ProTable, { ActionType } from '@ant-design/pro-table';
import { Input, Space, Table, Tag, TreeSelect, Typography, message } from 'antd';
import { DefaultOptionType } from 'antd/lib/select';
import moment from 'moment';
import React, { Ref, useEffect, useRef, useState } from 'react';
import { useAccess } from 'umi';
import { findTagColor } from '@/utils/findTagColor';
import DetailsActive from '../DetailsCounty/DetailsActive';
import { LightFilter, ProFormDateRangePicker, ProFormSelect, ProFormTreeSelect } from '@ant-design/pro-components';
import ProList from '@ant-design/pro-list';

interface TableActiveProps {
    actionRef?: Ref<ActionType | undefined>;
    countyKey: string
}

const TableActive: React.FC<TableActiveProps> = ({ countyKey }) => {
    const access = useAccess();
    const actionRef = useRef<ActionType>();
    const [queryParam, setQueryParamState] = useState({});
    const [organizations, setOrganizationState] = useState<any[]>([]);

    /**
     * 加载 单位 列表
     * @param key
     */
    const treeOrganizationData = async () => {
        try {
            const response = await treeOrganization({ countyKey });
            if (response.code === 0) {
                setOrganizationState(response.data);
            }
        } catch (error) { }
    };

    useEffect(() => {
        //   if (access.线索上报x主动报送x配置x需求者) {
        treeOrganizationData();
        //   }
    }, []);
    useEffect(() => {
        actionRef.current?.reset()
    }, [countyKey])
    const filter = (inputValue: string, path: DefaultOptionType[]) =>
        path.some(
            (option) => (option.label as string).toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
        );

    return (
        // <ProTable<CuesActiveData.ActivePage>
        //     columns={[

        //         {
        //             title: '上报线索',
        //             dataIndex: 'articleName',
        //             // copyable: true,
        //             ellipsis: true,
        //             width: '200px',
        //             align: 'center',
        //             key: 'articleName',
        //             fixed: 'left',
        //             render: (dom, record, _index, action) => {
        //                 return (
        //                     <div
        //                         style={{
        //                             textAlign: 'left',
        //                             textOverflow: 'ellipsis',
        //                             whiteSpace: "nowrap",
        //                             overflow: 'hidden'
        //                         }}
        //                     >
        //                         {record.isImage === 1 ? <FileImageOutlined /> : <></>}
        //                         {record.isFile === 1 ? <PaperClipOutlined /> : <></>}
        //                         <DetailsActive
        //                             table='active'
        //                             id={record.id}
        //                             name={record.articleName}
        //                             onRefurbish={() => {
        //                                 actionRef?.current?.reload();
        //                             }}
        //                             countyKey={countyKey}
        //                         />
        //                     </div>
        //                 );
        //             },
        //         },
        //         {
        //             title: '单位',
        //             key: 'articleOrganizationTopName',
        //             dataIndex: 'articleOrganizationTopName',
        //             width: '180px',
        //             align: 'center',
        //             search: false,
        //             render: (_, row) => (
        //                 <div
        //                     style={{
        //                         textAlign: 'left',
        //                         marginLeft: '24px'
        //                     }}
        //                 >
        //                     <Tag color={findTagColor(row.articleOrganizationTopName)}>{row.articleOrganizationTopName}</Tag>
        //                     {row.articleOrganizationName}
        //                 </div>
        //             ),
        //         },
        //         {
        //             title: '行业',
        //             dataIndex: 'articleIndustryName',
        //             key: 'articleIndustryName',
        //             width: '80px',
        //             align: 'center',
        //             search: false,
        //         },
        //         {
        //             title: '新闻联络人',
        //             dataIndex: 'articleAccountName',
        //             // copyable: true,
        //             ellipsis: true,
        //             search: false,
        //             width: '100px',
        //             align: 'center',
        //             key: 'articleAccountName',
        //         },

        //         {
        //             title: '创建时间',
        //             dataIndex: 'createdTime',
        //             key: 'createdTime',
        //             width: '120px',
        //             align: 'center',
        //             search: false,
        //         },
        //         {
        //             title: '是否录用',
        //             dataIndex: 'isAdopt',
        //             key: 'isAdopt',
        //             valueType: 'select',
        //             width: '80px',
        //             align: 'center',
        //             fixed: 'right',
        //             // hideInTable: !access.线索上报x主动报送x选题列表x收录线索,
        //             valueEnum: {
        //                 0: { text: '未录用' },
        //                 1: { text: '已录用' },
        //             },
        //             render: (_, record) => (
        //                 <Space>
        //                     <Tag color={record.isAdopt === 0 ? '#F9CF59' : '#1AA15F'} key="isAdopt">
        //                         {record.isAdopt === 0 ? '未录用' : '已录用'}
        //                     </Tag>
        //                 </Space>
        //             ),
        //         },
        //         {
        //             title: '评分',
        //             dataIndex: 'score',
        //             key: 'score',
        //             width: '50px',
        //             align: 'center',
        //             fixed: 'right',
        //             search: false,
        //             // hideInTable: !access.线索上报x主动报送x选题列表x评分线索,
        //         },
        //         {
        //             title: '上报日期',
        //             dataIndex: 'createdTimes',
        //             key: 'createdTimes',
        //             valueType: 'dateRange',
        //             hideInTable: true,
        //             fieldProps: {
        //                 allowClear: true,
        //                 placeholder: ['开始日期', '结束日期'],
        //                 format: 'YYYY-MM-DD',
        //                 ranges: {
        //                     今日: [moment(), moment()],
        //                     本月: [moment().startOf('month'), moment().endOf('month')],
        //                     上月: [
        //                         moment().startOf('month').subtract(1, 'months'),
        //                         moment().endOf('month').subtract(1, 'months'),
        //                     ],
        //                     最近7天: [moment().subtract(6, 'days'), moment()],
        //                     最近60天: [moment().subtract(59, 'days'), moment()],
        //                     最近90天: [moment().subtract(89, 'days'), moment()],
        //                 },
        //             },
        //         },
        //         {
        //             title: '上报单位',
        //             hideInTable: true,
        //             // hideInSearch: !access.线索上报x主动报送x选题列表x收录线索,
        //             key: 'organizationIds',
        //             valueType: 'cascader',
        //             colSize: 2,
        //             fieldProps: {
        //                 multiple: true,
        //                 options: organizations,
        //                 showSearch: { filter },
        //             },
        //         },
        //     ]}
        //     actionRef={actionRef}
        //     request={async (params = {}) => {
        //         if (params.organizationIds) {
        //             const organizationParentIds: string[] = [];
        //             let organizationIds: string[] = [];

        //             params.organizationIds.forEach((item) => {
        //                 if (item.length === 1) {
        //                     organizationParentIds.push(item[0]);
        //                 } else if (item.length > 1) {
        //                     organizationIds.push(item[1]);
        //                 }
        //             });
        //             organizationParentIds.forEach((id) => {
        //                 const ids = organizations.find((item) => item.id === id).children;
        //                 organizationIds = organizationIds.concat(ids.map((item: any) => item.id));
        //             });
        //             params.articleOrganizationIds = organizationIds;
        //         }

        //         const response = await getCuesActivePage({...params,countyKey});

        //         return Promise.resolve({
        //             data: response.data.data,
        //             total: response.data.total,
        //             success: response.code === 0,
        //         });
        //     }}
        //     rowKey="id"
        //     dateFormatter="string"
        //     bordered
        //     search={{
        //         defaultCollapsed: false,
        //         span: 8,
        //         labelWidth: 'auto',
        //     }}
        //     pagination={{
        //         showQuickJumper: true,
        //         showSizeChanger: true,
        //         defaultPageSize: 20,
        //     }}
        // />
        <>
            <Input.Search
                placeholder="报送线索"
                enterButton="搜索"
                allowClear
                style={{ maxWidth: 522, width: '100%' }}
                onChange={(e) => {
                    setQueryParamState({ ...queryParam, articleName: e.target.value });
                }}
                onSearch={(value) => {
                    actionRef.current?.reset();
                }}
            />
            <LightFilter
                // initialValues={{ run: 2 }}
                onValuesChange={(value) => {
                    setQueryParamState(value);
                    actionRef.current?.reset();
                }}
            >
                {/* <ProFormTreeSelect
                    name="articleOrganizationIds"
                    label="上报单位"
                    width="xl"
                    placeholder="选择单位"
                    fieldProps={{
                        treeData: organizations,
                        treeCheckable: true,
                        showCheckedStrategy: TreeSelect.SHOW_ALL,
                    }}
                /> */}
                <ProFormSelect
                    name="isAdopt"
                    label="是否录用"
                    options={[
                        {
                            label: '已录用',
                            value: 1,
                        },
                        {
                            label: '未录用',
                            value: 0,
                        },
                    ]}
                />
                <ProFormDateRangePicker name="createdTimes" label="报送日期" allowClear
                    fieldProps={{
                        popupStyle: {
                            width: 280
                        }
                    }}
                />
            </LightFilter>
            <ProList<CuesSubmitData.SubmitPage>
                header={false}
                headerTitle={false}
                ghost={true}
                // ghost={false}
                // itemCardProps={{
                //   ghost: false,
                // }}
                pagination={{
                    defaultPageSize: 8,
                    showSizeChanger: false,
                    showTotal: false,
                    style: { textAlign: 'center' },
                }}
                className='topicRender'
                style={{ marginTop: 10 }}
                actionRef={actionRef}
                request={async (params = {}) => {

                    const response = await getCuesActivePage({ ...params, countyKey, ...queryParam });

                    return Promise.resolve({
                        data: response.data.data,
                        total: response.data.total,
                        success: response.code === 0,
                    });
                }}
                showActions="hover"
                grid={{ gutter: 18, column: 1 }}
                onItem={(record: any) => {
                    return {
                        onMouseEnter: () => { },
                        onClick: () => { },
                    };
                }}
                renderItem={(item: CuesSubmitData.SubmitPage, index: number) => {
                    return (
                        <DetailsActive
                            table='active'
                            countyKey={countyKey}
                            onRefurbish={() => {
                                actionRef.current?.reload();
                            }}
                            id={item.id}
                            name={item.articleName}
                            item={item}
                            triggerMode="card"
                        />
                    );
                }}
                rowKey={'id'}
                toolBarRender={false}
            />
        </>
    );
};

export default TableActive;
